<template>
  <div class="v-header" :style="{ background: c_bgimg }">
    <div class="header">
      <img class="shoplogo" :src="seller.avatar" alt="" />
      <div class="shopinfo">
        <div class="name">
          <img
            class="shopbrand"
            src="@/assets/images/brand@2x.png"
            alt=""
          /><span>{{ seller.name }}</span>
        </div>
        <div class="send">
          {{ seller.description }}<span>/</span
          >{{ seller.deliveryTime }}分钟送达
        </div>
        <div
          class="discount"
          v-if="seller.supports"
          :class="'supports' + seller.supports[0].type"
        >
          {{ seller.supports[0].description }}
        </div>
      </div>
      <div class="abs-discount-num" v-if="seller.supports" @click="handleClickShow">
        {{ seller.supports.length }}个 <van-icon name="arrow" />
      </div>
    </div>
    <div class="notice" @click="handleClickShow" v-if="seller.bulletin">
      <img
        class="noticelogo"
        src="../../assets/images/bulletin@2x.png"
        alt=""
      />
      {{ seller.bulletin }}
      <span class="abs-notice-more" v-if="seller.bulletin.length > 20"
        ><van-icon name="arrow"
      /></span>
    </div>
    <v-popup v-show="ispopup" :seller='seller' @fnpopuphide='handleClickHide'></v-popup>
  </div>
</template>
<script>
import vPopup from './popup';
export default {
  name: "vheader",
  data() {
    return {
      ispopup:false
    };
  },
  computed: {
    c_bgimg() {
      return "url(" + this.seller.avatar + ") top/cover no-repeat";
    },
    c_supports_type() {
      return this.seller.supports[0].type;
    },
    c_supports_description() {
      return this.seller.supports[0].description;
    }
  },
  props: {
    seller: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleClickShow(){
      this.ispopup = true
    },
    handleClickHide(){
      this.ispopup = false
    }
  },
  components:{
    vPopup
  }
};
</script>
<style lang="less" scoped>
.myicon(@rem:-0.03rem) {
  .van-icon-arrow {
    vertical-align: @rem;
  }
}
.v-header {
  position: relative;
  box-sizing: border-box;
  z-index: 1;
  &::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    filter: blur(10px);
    background: inherit;
    z-index: 2;
  }
  .header {
    padding: 0.48rem 0.48rem 0.36rem;
    display: flex;
    justify-content: flex-start;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    z-index: 11;
    .shoplogo {
      width: 1.28rem;
      height: 1.28rem;
      margin-right: 0.32rem;
      border-radius: 4px;
    }
    .shopinfo {
      flex: 1;
      height: 1.28rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.24rem;
      line-height: 0.32rem;
      color: #e2e2e2;
      .name {
        font-size: 0.32rem;
        line-height: 0.4rem;
        color: white;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .shopbrand {
          height: 0.4rem;
          width: auto;
          margin-right: 0.2rem;
        }
      }
      .send,
      .discount {
        display: flex;
        justify-content: flex-start;

        span {
          display: inline-block;
          margin: 0 0.1rem;
        }
      }
      .discount {
        padding-left: 0.5rem;
        &.supports0 {
          background: url("../../assets/images/decrease_2@2x.png") 0 center
            no-repeat;
          background-size: contain;
        }
      }
    }
    .abs-discount-num {
      position: absolute;
      right: 0.24rem;
      bottom: 0.24rem;
      font-size: 0.2rem;
      padding: 0 0.16rem;
      min-width: 0.6rem;
      line-height: 0.48rem;
      background: rgba(0, 0, 0, 0.2);
      color: white;
      border-radius: 10px;
      .myicon
    }
  }
  .notice {
    position: relative;
    box-sizing: border-box;
    z-index: 11;
    font-size: 0.2rem;
    height: 0.56rem;
    line-height: 0.56rem;
    padding: 0 0.24rem;
    padding-right: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    .noticelogo {
      height: 0.25rem;
      display: inline-block;
      vertical-align: middle;
    }
    .abs-notice-more {
      position: absolute;
      right: 0.24rem;
      top: 0;
      line-height: 0.5rem;
      .myicon(-0.07rem)
    }
  }
}
</style>